@upload-prefix-cls: ~"@{css-prefix}upload";
@title-height:22px;
@normal-font-size: 12px;
.@{upload-prefix-cls} {
  input[type="file"]{
    display: none;
  }
  &-list-file-title{
    float: left;
    font-size: @normal-font-size;
    text-align: left;
    color: @primary-color;
    padding-left: 5px;
    height: @title-height;
  }
  &-list-file-title-fail{
    color: @error-color !important;
  }
  &-accept-file-types{
    text-align: left;
    list-style: none;
    &-drag-1{
      margin-left: 20px;
    }
  }
  &-accept-file-types-details{
    color: @color-complementary-6;
    font-size: @normal-font-size;
  }
  &-drag-1-li{
    width: 160px;
    list-style: none;
    float: left;
    margin-left: 20px;
    margin-top: 5px;
  }
  &-drag-1-content{
    border: 1px solid @border-color-base;
    position: relative;
    display: flex;
    border-radius: 2px;
    height: 96px;
    width: 100%;
    justify-content: center;
    align-items: center;
    &>.icon-guanbi{
      position: absolute;
      right: 12px;
      top: 12px;
      color: @color-complementary-5;
      cursor: pointer;
    }
    &-file-title{
      color: @primary-color;
      font-size: 12px;
      line-height: 1;
      word-break: break-all;
      display: flex;
      &-uploading{
        width: 12px;
        height: 12px;
        margin-right: 5px;
        border-radius: 50%;
        border: 2px solid transparent;
        border-top-color: @color-complementary-5;
        border-right-color: @color-complementary-5;
        animation: upload-loading .8s linear infinite;
      }
    }
    &-sup{
      margin-top: 5px;
    }
  }
  &-list-drag-1{
    margin-left: -20px;
  }
  &-list{
    margin-top: 5px;

    &-file{
      line-height: @title-height;
      color: @text-color;
      transition: background-color @transition-time @ease-in-out;
      overflow: hidden;
      position: relative;

      & > span{
        cursor: pointer;
        transition: color @transition-time @ease-in-out;
        i{
          display: inline-block;
          width: @font-size-small;
          height: @font-size-small;
          color: @color-complementary-5;
          text-align: center;
        }
      }

      &-unupload:hover{
        background: @color-bg-hover;
      }
      &:hover{
        .@{upload-prefix-cls}-list-remove{
          opacity: 1;
        }
      }
    }
    &-remove{
      opacity: 0;
      cursor: pointer;
      float: right;
      margin-right: 4px;
      color: @primary-color;
      font-size: 8px;
      line-height: 22px!important;
      transition: all @transition-time ease;
    }
    &-remove-on-progress{
      position: absolute;
      right: 0px;
      top: 0px;
    }
  }

  &-select {
    display: inline-block;
  }

  &-drag{
    background: @color-bg-card;
    border: 1px dashed @border-color-base;
    border-radius: @border-radius-base;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color @transition-time ease;
    &:hover{
      border: 1px dashed @primary-color;
    }
  }
  &-drag-main{
    width: 400px;
  }
  &-select-1-main{
    border: 1px dashed @border-color-base;
  }
  &-dragOver{
    border: 1px dashed @primary-color;
  }
  &-content-drag-default{
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    &-text-details{
      color: @color-complementary-6;
      font-size: @normal-font-size;
    }
    &-text-strong{
      color: @color-brand-primary;
      font-size: @normal-font-size;
      &:hover{
        color: @color-brand-press;
      }
    }
  }
  &-content-drag-1-default{
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &-progress{
    &-outer {
      height: 22px;
      background-color: @color-bg-hover;
    }
    &-bg {
      text-align: right;
      -webkit-transition: all 0.2s linear;
      transition: all 0.2s linear;
      position: relative;
      border-radius: inherit;
    }
    &-inner {
      display: inline-block;
      width: 100%;
      background-color: @color-bg-hover;
      vertical-align: middle;
      position: relative;
      color: @primary-color;
    }
    &-inner-text {
      color: @primary-color;
      line-height: 22px;
      white-space: nowrap;
      padding-left: 5px;
      text-align: left;
      & > i{
        color: @color-complementary-5;
      }
    }
  }
}
